<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw">
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons>
        <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
        <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
        <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// vxe-table配置
const gridOptions = reactive({
  // 是否显示边框
  border: true,
  // 表格高度
  height: 300,
  // 表头和数据对齐方式
  align: null,
  // 列配置
  columnConfig: {
    // 是否可以调整列宽度
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: '名字' },
    { field: 'sex', title: '性别', sortable: true },
    { field: 'address', title: '地址' },
  ],
  // 工具栏配置
  toolbarConfig: {
    slots: {
      // 按钮栏slot配置
      buttons: 'toolbar_buttons',
    },
  },
  // 表格数据
  data: [
    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 1, age: 28, address: 'Shenzhen' },
    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 0, age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 1, age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 0, age: 23, address: 'Shenzhen' },
    { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 0, age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 0, age: 21, address: 'Shenzhen' },
    { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 1, age: 29, address: 'Shenzhen' },
    { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 1, age: 35, address: 'Shenzhen' },
  ],
})
</script>
<style lang="less" scoped></style>
